<script lang="ts" setup>
import { onBeforeUnmount,computed  } from 'vue';

import {
  alert,
  clearAllAlerts,
  confirm,
  Page,
  prompt,
  useVbenModal,
} from '@vben/common-ui';

import { Button, Card, Flex, message } from 'ant-design-vue';

import FormModalDemo from './form-modal-demo.vue';
import { useUserStore } from '#/store/user'
// 使用 Pinia store
const userStore = useUserStore()
// 可以直接使用 store 中的方法
const handleIncrementAge = (index: number) => {
  userStore.incrementAge(index)
}
const userId = computed(() => userStore.userId);
defineOptions({ name: 'ModalExample' });
// 类型定义和复杂数据
interface User {
  name: string;
  age: number;
  email?: string;
  id?: string;
}

const [FormModal, formModalApi] = useVbenModal({
  connectedComponent: FormModalDemo,
});
const editUser = (user):void=>{
  // form.id = user.id
  // form.name = user.name
  // form.age = user.age
  // form.email = user.email
  //   baseFormApi.setValues({
  // form.id = user.id,
  // form.name = user.name,
  // form.age = user.age,
  // form.email = user.email
  // });

  // 设置单个表单值
  // baseFormApi.setFieldValue('checkbox', true);
    openFormModal(user)
    console.log('userid',user.id)
    userStore.editUserId(user.id)

  
}

function openFormModal(user) {
  formModalApi
    .setData({
      // 表单值
      values: { name: user.name, age: user.age,email:user.email },
    })
    .open();
}
</script>

<template>
  <Page
    auto-content-height
    description="弹窗组件常用于在不离开当前页面的情况下，显示额外的信息、表单或操作提示，更多api请查看组件文档。"
    title="弹窗组件示例"
  >
    <template #extra>
      <DocButton path="/components/common-ui/vben-modal" />
    </template>
    <BaseModal />
    <InContentModal />
    <AutoHeightModal />
    <DragModal />
    <DynamicModal />
    <SharedDataModal />
    <FormModal />
    <NestedModal />
    <BlurModal />
    <Flex wrap="wrap" class="w-full" gap="10">
 

      <Card class="w-[300px]" title="表单弹窗示例">
        <p>弹窗与表单结合</p>
        <template #actions>
          <Button type="primary" @click="openFormModal"> 打开表单弹窗 </Button>
        </template>
      </Card>
 <div class="section">
       <h3>用户列表 (来自 Pinia)</h3>
    <ul class="user-list">
      <li v-for="(user, index) in userStore.users" :key="index">
       <span class="user-name">{{ user.name }} ----  <span @click = editUser(user)  >编辑</span>  </span>  
        <span  class="user-age" @click="handleIncrementAge(index)">
          年龄: {{ user.age }} (点击+1)------------- {{userId}}
        </span>
      </li>
    </ul>
  </div>
      
    </Flex>
  </Page>
</template>
